import React from "react";
import styles from "../css/list.module.css";
import { useNavigate } from "react-router-dom";
function TrainItem(props) {
  let nav = useNavigate();

  return (
    <div
      className={styles.TrainItem}
      onClick={() => {
        nav(`/detail`);
       
      }}
    >
      <div className={styles.row1}>
        <div className={styles.row1Item}>
          <span style={{ fontWeight: "bold", color: "skyblue" }}>
            {props.startTime}
          </span>
          <span>{props.startStation}</span>
        </div>
        <div className={styles.row1Item}>
          <span style={{ color: "gray" }}>{props.timeTaken}</span>
          <span style={{ color: "gray" }}>{props.trainNo}</span>
        </div>
        <div className={styles.row1Item}>
          <span style={{ fontWeight: "bold" }}>{props.endTime}</span>
          <span>{props.endStation}</span>
        </div>
        <div className={styles.row1Item}>
          <span style={{ color: "rgb(166, 100, 7)", fontWeight: "bold" }}>
            ￥{props.ssoftSeat.price}
          </span>
          <span
            style={{
              background: "skyblue",
              color: "#fff",
              borderRadius: "5px",
            }}
          >
            可候补
          </span>
        </div>
      </div>
      <div className={styles.row2}>
        <span>二等:{props.ssoftSeat.ticketNum}</span>
        <span>一等:{props.fsoftSeat.ticketNum}</span>
        <span>商务:{props.businessSeat.ticketNum}</span>
        <span></span>
      </div>
    </div>
  );
}

export default TrainItem;
